<template>
  <div ref="containerRef" class="screen-left">
    <component
      :is="item.component"
      v-for="item in components"
      :key="item.name"
      class="screen-left-item"
      :name="item.name"
    >
      <Left1 />
    </component>
  </div>
</template>

<script setup lang="ts">
import { shallowRef } from 'vue';
import { useSortable } from '@/utils/useSortable';

import Left1 from './left1.vue';
import Left2 from './left2.vue';
const components = shallowRef([
  { name: 'left1', component: Left1 },
  { name: 'left2', component: Left2 },
]);

const { containerRef } = useSortable(components);
</script>

<style lang="scss" scoped>
.screen-left {
  width: 100%;
  height: 100%;
  padding-right: 8px;
  .screen-left-item {
    width: 100%;
    height: 40%;
    // padding: 16px;
  }
  // .screen-left-item + .screen-left-item {
  //   margin-top: 15px;
  // }
  .screen-left-item {
    padding-bottom: 15px;
  }
  .screen-left-item:nth-child(1) {
    height: 60%;
  }
}
</style>
